

<!DOCTYPE html>
<html lang="en" color-mode=light>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>路由学习笔记 - Hexo</title>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="google" content="notranslate" />
  
  <meta name="description" content="认识路由路由介绍路由（routing） 就是通过互联的...">
  <meta name="author" content="John Doe">
  <link rel="icon" href="/images/icons/favicon-16x16.png" type="image/png" sizes="16x16">
  <link rel="icon" href="/images/icons/favicon-32x32.png" type="image/png" sizes="32x32">
  <link rel="apple-touch-icon" href="/images/icons/apple-touch-icon.png" sizes="180x180">
  <meta rel="mask-icon" href="/images/icons/stun-logo.svg" color="#333333">
  
    <meta rel="msapplication-TileImage" content="/images/icons/favicon-144x144.png">
    <meta rel="msapplication-TileColor" content="#000000">
  

  
<link rel="stylesheet" href="/css/style.css">


  
    
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1445822_p6ry5n7lrr.css">

  

  
    
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">

  

  
    
      
        
        
<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/xcode.min.css" name="highlight-style" mode="light">

      
        
        
<link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/9.18.1/styles/solarized-dark.min.css" name="highlight-style" mode="dark">

      
  

  <script>
    var CONFIG = window.CONFIG || {};
    var ZHAOO = window.ZHAOO || {};
    CONFIG = {
      isHome: false,
      fancybox: true,
      pjax: false,
      loading: {
        gif: '/images/theme/loading.gif',
        lottie: ''
      },
      lazyload: {
        enable: true,
        only_post: 'false',
        loading: {
          gif: '/images/theme/loading.gif',
          lottie: ''
        }
      },
      donate: {
        enable: false,
        alipay: 'https://pic.izhaoo.com/alipay.jpg',
        wechat: 'https://pic.izhaoo.com/wechat.jpg'
      },
      galleries: {
        enable: true
      },
      fab: {
        enable: true,
        always_show: false
      },
      carrier: {
        enable: false
      },
      daovoice: {
        enable: false
      },
      preview: {
        background: {
          default: '',
          api: ''
        },
        motto: {
          default: '我在开了灯的床头下，想问问自己的心啊。',
          typing: true,
          api: 'https://v2.jinrishici.com/one.json',
          data_contents: '["data","content"]'
        },
      },
      qrcode: {
        enable: false,
        type: 'url',
        image: 'https://pic.izhaoo.com/weapp-code.jpg',
      },
      toc: {
        enable: true
      },
      scrollbar: {
        type: 'default'
      },
      notification: {
        enable: false,
        delay: 4500,
        list: '',
        page_white_list: '',
        page_black_list: ''
      },
      search: {
        enable: false,
        path: ''
      }
    }
  </script>

  

  

<meta name="generator" content="Hexo 6.3.0"></head>

<body class="lock-screen">
  <div class="loading" id="loading"></div>
  
    


  <nav class="navbar">
    <div class="left">
      
        <i class="iconfont iconhome j-navbar-back-home"></i>
      
      
      
        <i class="iconfont iconmoono" id="color-toggle" color-toggle="light"></i>
      
      
    </div>
    <div class="center">路由学习笔记</div>
    <div class="right">
      <i class="iconfont iconmenu j-navbar-menu"></i>
    </div>
    
  </nav>

  
  

<nav class="menu">
  <div class="menu-container">
    <div class="menu-close">
      <i class="iconfont iconbaseline-close-px"></i>
    </div>
    <ul class="menu-content"><li class="menu-item">
        <a href="/ " class="underline "> 首页</a>
      </li><li class="menu-item">
        <a href="/archives/ " class="underline "> 日志</a>
      </li><li class="menu-item">
        <a href="/about " class="underline "> 关于</a>
      </li></ul>
    
      <div class="menu-copyright"><div><p>Powered by <a target="_blank" href="https://hexo.io">Hexo</a>  |  Theme - <a target="_blank" href="https://github.com/izhaoo/hexo-theme-zhaoo">zhaoo</a></p> <p><img class="aaa" src="/images/theme/iconBA.png" style="width:16px; height:18px"/> <a href="https://beian.mps.gov.cn/#/query/webSearch?code=44200102445419" rel="noreferrer" target="_blank">粤公网安备44200102445419</a>       &nbsp; <a href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备2023036693号</a></p><p>&copy;田林</p> </div></div>
    
  </div>
</nav>
  <main id="main">
  <div class="article-wrap">
    <div class="row container">
      <div class="col-xl-3"></div>
      <div class="col-xl-6"><article class="article">
  <div class="wrap">
    <section class="head">
  <img   class="lazyload" data-original="/images/theme/post-image.jpg" src=""  draggable="false">
  <div class="head-mask">
    <h1 class="head-title">路由学习笔记</h1>
    <div class="head-info">
      <span class="post-info-item"><i class="iconfont iconcalendar"></i>December 13, 2023</span>
      
      <span class="post-info-item"><i class="iconfont iconfont-size"></i>15924</span>
    </div>
  </div>
</section>
    <section class="main">
      <section class="content">
        
        <h1 id="认识路由"><a href="#认识路由" class="headerlink" title="认识路由"></a>认识路由</h1><h3 id="路由介绍"><a href="#路由介绍" class="headerlink" title="路由介绍"></a>路由介绍</h3><pre><code>路由（routing） 就是通过互联的网络信息从源地址传输到目的地址的活动
路由提供两种机制：**路由**和**转发**
</code></pre>
<p>​	1.路由是决定数据包从来源到目的地的路径</p>
<p>​	2.转发将输入端的数据转移到合适的输出端</p>
<p>路由有个非常重要的概念是<strong>路由表</strong></p>
<p>​	路由表本质上就是一个映射表，决定了数据包的指向</p>
<h3 id="后端路由"><a href="#后端路由" class="headerlink" title="后端路由"></a>后端路由</h3><p>早期网站开发由服务器渲染HTML页面也称后端渲染</p>
<h4 id="那么什么是后端渲染"><a href="#那么什么是后端渲染" class="headerlink" title="那么什么是后端渲染"></a>那么什么是后端渲染</h4><ol>
<li><p>一个页面有自己对应的网址，也就是URL</p>
</li>
<li><p>URL会发送至服务器，通过正则匹配对该URL进行匹配，并且最后交给一个Controller进行处理</p>
</li>
<li><p>Controller进行各种处理，最终生成HTML或数据，返回前端</p>
<p>以上就完成了一个IO操作</p>
</li>
</ol>
<p>当我们页面中需要请求不同的路径内容时,交给服务器来进行处理,服务器渲染好整个页面,并且将页面返回给客户顿，这种情况下渲染好的页面,不需要单独加载任何的 js 和 css ,可以直接交给浏览器展示这样也有利于 SEO 的优化。</p>
<p>缺点：</p>
<p>​	一种情况是整个页面的模块由后端人员来编写和维护的.</p>
<p>​	另一种情况是前端开发人员如果要开发页面,需要通过 PHP 和 java 等语言来编写页面代码,<br>​	而且通常情况下 HTML 代码和数据以及对应的逻辑会混在一起编写和维护都是非常糟糕的事情</p>
<h3 id="前端路由"><a href="#前端路由" class="headerlink" title="前端路由"></a>前端路由</h3><h4 id="前后端分离阶段"><a href="#前后端分离阶段" class="headerlink" title="前后端分离阶段"></a>前后端分离阶段</h4><p>随着Ajax的出现有了前后端分离的开发模式<br>​后端只提供API来返回数据,前端通过Ajax获取数据，并且可以通过JavaScript将数据渲染到页面中， 这样做最大的优点就是前后端责任清晰，<br>后端专注于数据上前端专注于交互和可视化上	 并且当移动端(iOS&#x2F;Android)出现后,后端不需要进行任何处理依然使用之前的一套API即可<br>目前很多的网站依然采用这种模式开发</p>
<h4 id="单页面富应用阶段"><a href="#单页面富应用阶段" class="headerlink" title="单页面富应用阶段"></a>单页面富应用阶段</h4><p>   其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由口 也就是前端来维护一套路由规则.</p>
<h1 id="Vue-router基本使用"><a href="#Vue-router基本使用" class="headerlink" title="Vue-router基本使用"></a>Vue-router基本使用</h1><h6 id="URL的hash"><a href="#URL的hash" class="headerlink" title="URL的hash"></a>URL的hash</h6><p>URL的hash也就是锚点(#)，本质上是改变window.location的href属性<br>我们可以通过直接赋值location.hash来改变href 但是页面不发生刷新</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs javascript">location.<span class="hljs-property">href</span><br>显示当前路由<br><span class="hljs-string">&quot;http://localhost:8080/#/&quot;</span><br><br>location.<span class="hljs-property">hash</span>=<span class="hljs-string">&#x27;/&#x27;</span><br><span class="hljs-string">&quot;/&quot;</span><br></code></pre></td></tr></table></figure>
<h6 id="HTML5的history模式-pushState"><a href="#HTML5的history模式-pushState" class="headerlink" title="HTML5的history模式:pushState"></a>HTML5的history模式:<strong>pushState</strong></h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><code class="hljs javascript">history.<span class="hljs-title function_">pushState</span>(&#123;data&#125;,<span class="hljs-string">&#x27;title&#x27;</span>,<span class="hljs-string">&#x27;url&#x27;</span>)<br>例：<br>history.<span class="hljs-title function_">pushState</span>(&#123;&#125;,<span class="hljs-string">&#x27;&#x27;</span>,<span class="hljs-string">&#x27;html&#x27;</span>)<br><span class="hljs-literal">undefined</span><br><span class="hljs-attr">http</span>:<span class="hljs-comment">//localhost:8080/#/ =&gt; http://localhost:8080/html</span><br><br>history.<span class="hljs-title function_">pushState</span>(&#123;&#125;,<span class="hljs-string">&#x27;&#x27;</span>,<span class="hljs-string">&#x27;about&#x27;</span>)<br><span class="hljs-literal">undefined</span><br><br><span class="hljs-attr">http</span>:<span class="hljs-comment">//localhost:8080/html =&gt; http://localhost:8080/about</span><br><br>history.<span class="hljs-title function_">pushState</span>(&#123;&#125;,<span class="hljs-string">&#x27;&#x27;</span>,<span class="hljs-string">&#x27;me&#x27;</span>)<br><span class="hljs-literal">undefined</span><br><span class="hljs-attr">http</span>:<span class="hljs-comment">//localhost:8080/about =&gt; http://localhost:8080/me</span><br><br><br><br>history.<span class="hljs-title function_">back</span>()<br>#通过back消除原先的进栈<br><span class="hljs-attr">http</span>:<span class="hljs-comment">//localhost:8080/me =&gt; http://localhost:8080/about</span><br>以此类推<br><br>history.<span class="hljs-title function_">go</span>(-<span class="hljs-number">1</span>)<br><span class="hljs-attr">http</span>:<span class="hljs-comment">//localhost:8080/about =&gt; http://localhost:8080/html</span><br>以此类推<br><br>history.<span class="hljs-title function_">go</span>(<span class="hljs-number">1</span>)<br><span class="hljs-attr">http</span>:<span class="hljs-comment">//localhost:8080/html =&gt; http://localhost:8080/about</span><br>以此类推<br></code></pre></td></tr></table></figure>

<h6 id="补充说明"><a href="#补充说明" class="headerlink" title="补充说明"></a><strong>补充说明</strong></h6><p>上面只演示了三个方法<br>因为 history.back() 等价于 history.go(-1) ，history.forward() 则等价于 history.go(1)。<br>这三个接口等同于浏览器界面的前进后退</p>
<h6 id="认识Vue-router"><a href="#认识Vue-router" class="headerlink" title="认识Vue-router"></a>认识Vue-router</h6><p>目前前端流行的三大框架,都有自己的路由实现:</p>
<ol>
<li>Angular的ngRouter</li>
<li>React的ReactRouter</li>
<li>Vue的vue-router</li>
</ol>
<p>vue-router是Vuejs官方的路由插件，它和vuejs是深度集成的，适合用于构建单页面应用。<br>路由用于设定访问路径，将路径和组件映射起来<br>vue-router的单页面应用中，页面路径的改变就是组件间的切换</p>
<h6 id="安装vue-router"><a href="#安装vue-router" class="headerlink" title="安装vue-router"></a>安装vue-router</h6><ol>
<li>安装vue-router：npm install vue-router –save</li>
<li>模块化工程使用（ps:因为是一个插件，所以可以通过Vue.use（）来安装路由功能）</li>
<li>导入路由对象，并调用Vue.use(VueRouter)</li>
<li>创建路由实例，并传入路由映射配置</li>
<li>在Vue实例中挂载创建的路由实例</li>
</ol>
<h6 id="使用vue-router"><a href="#使用vue-router" class="headerlink" title="使用vue-router"></a>使用vue-router</h6><ol>
<li>创建路由组件</li>
<li>配置路由映射: 组件和路径映射关系</li>
<li>使用路由: 通过<router-link>和<router-view></li>
</ol>
<p> 例（以我自己的编写的为例）：</p>
<p>router文件下的index.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// 配置路由相关信息</span><br><span class="hljs-comment">// 导入</span><br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Vue</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue&#x27;</span><br><span class="hljs-keyword">import</span> <span class="hljs-title class_">VueRouter</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue-router&#x27;</span><br><br><span class="hljs-comment">// 1.通过Vue.use(插件),安装插件</span><br><span class="hljs-title class_">Vue</span>.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">VueRouter</span>)<br><br><span class="hljs-comment">// 创建路由对象</span><br><span class="hljs-keyword">const</span> routes = [<br><br>]<br><br><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> <span class="hljs-title class_">VueRouter</span>(&#123;<br>    <span class="hljs-comment">// 配置路由与组件之间的应用关系</span><br>    routes,<br>&#125;)<br><br><br><span class="hljs-comment">// 将router对象传入Vue实例</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> router<br></code></pre></td></tr></table></figure>
<p>src文件下的main.js</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Vue</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue&#x27;</span><br><span class="hljs-keyword">import</span> <span class="hljs-title class_">App</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./App&#x27;</span><br><span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./router&#x27;</span> 导入index.<span class="hljs-property">js</span>的router<br><br><span class="hljs-title class_">Vue</span>.<span class="hljs-property">config</span>.<span class="hljs-property">productionTip</span> = <span class="hljs-literal">false</span><br><br><span class="hljs-keyword">new</span> <span class="hljs-title class_">Vue</span>(&#123;<br>    <span class="hljs-attr">el</span>: <span class="hljs-string">&#x27;#app&#x27;</span>,<br>    router, 挂载导入router实例<br>    <span class="hljs-attr">render</span>: <span class="hljs-function"><span class="hljs-params">h</span> =&gt;</span> <span class="hljs-title function_">h</span>(<span class="hljs-title class_">App</span>)<br>&#125;)<br></code></pre></td></tr></table></figure>
<h6 id="路由映射配置"><a href="#路由映射配置" class="headerlink" title="路由映射配置"></a>路由映射配置</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// 配置路由相关信息</span><br><span class="hljs-comment">// 导入</span><br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Vue</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">VueRouter</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;vue-router&#x27;</span>;<br><span class="hljs-keyword">import</span> <span class="hljs-title class_">Home</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../components/Home&quot;</span><br><span class="hljs-keyword">import</span> <span class="hljs-title class_">About</span> <span class="hljs-keyword">from</span> <span class="hljs-string">&quot;../components/About&quot;</span><br><span class="hljs-comment">// 1.通过Vue.use(插件),安装插件</span><br><span class="hljs-title class_">Vue</span>.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">VueRouter</span>);<br><br><span class="hljs-comment">// 创建路由对象</span><br><span class="hljs-keyword">const</span> routes = [&#123;<br>    <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/home&#x27;</span>,<br>    <span class="hljs-attr">component</span>: <span class="hljs-title class_">Home</span><br>&#125;, &#123;<br>    <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/about&#x27;</span>,<br>    <span class="hljs-attr">component</span>: <span class="hljs-title class_">About</span><br>&#125;<br>];<br><br><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> <span class="hljs-title class_">VueRouter</span>(&#123;<br>    <span class="hljs-comment">// 配置路由与组件之间的应用关系</span><br>    routes,<br>&#125;);<br><br><br><span class="hljs-comment">// 将router对象传入Vue实例</span><br><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> router;<br></code></pre></td></tr></table></figure>
<p>Home组件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&lt;template&gt;<br>    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>我是首页<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>我是首页，hhh<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br>&lt;/template&gt;<br><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> &#123;</span></span><br><span class="language-javascript"><span class="language-xml">    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Home&#x27;</span>,</span></span><br><span class="language-javascript"><span class="language-xml"></span></span><br><span class="language-javascript"><span class="language-xml">    <span class="hljs-title function_">data</span>(<span class="hljs-params"></span>) &#123;</span></span><br><span class="language-javascript"><span class="language-xml">        <span class="hljs-keyword">return</span> &#123;</span></span><br><span class="language-javascript"><span class="language-xml"></span></span><br><span class="language-javascript"><span class="language-xml">        &#125;;</span></span><br><span class="language-javascript"><span class="language-xml">    &#125;,</span></span><br><span class="language-javascript"><span class="language-xml"></span></span><br><span class="language-javascript"><span class="language-xml">    <span class="hljs-title function_">mounted</span>(<span class="hljs-params"></span>) &#123;</span></span><br><span class="language-javascript"><span class="language-xml"></span></span><br><span class="language-javascript"><span class="language-xml">    &#125;,</span></span><br><span class="language-javascript"><span class="language-xml"></span></span><br><span class="language-javascript"><span class="language-xml">    <span class="hljs-attr">methods</span>: &#123;</span></span><br><span class="language-javascript"><span class="language-xml"></span></span><br><span class="language-javascript"><span class="language-xml">    &#125;,</span></span><br><span class="language-javascript"><span class="language-xml">&#125;;</span></span><br><span class="language-javascript"><span class="language-xml"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span><br><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span></span><br><span class="language-xml"></span><br><span class="language-xml"><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></span><br><br></code></pre></td></tr></table></figure>
<p>About组件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&lt;template&gt;<br>    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;Home&quot;</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>我是关于<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>我是关于，aaa<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br>&lt;/template&gt;<br><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> &#123;</span></span><br><span class="language-javascript"><span class="language-xml">    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;About&#x27;</span>,</span></span><br><span class="language-javascript"><span class="language-xml"></span></span><br><span class="language-javascript"><span class="language-xml">    <span class="hljs-title function_">data</span>(<span class="hljs-params"></span>) &#123;</span></span><br><span class="language-javascript"><span class="language-xml">        <span class="hljs-keyword">return</span> &#123;</span></span><br><span class="language-javascript"><span class="language-xml"></span></span><br><span class="language-javascript"><span class="language-xml">        &#125;;</span></span><br><span class="language-javascript"><span class="language-xml">    &#125;,</span></span><br><span class="language-javascript"><span class="language-xml"></span></span><br><span class="language-javascript"><span class="language-xml">    <span class="hljs-title function_">mounted</span>(<span class="hljs-params"></span>) &#123;</span></span><br><span class="language-javascript"><span class="language-xml"></span></span><br><span class="language-javascript"><span class="language-xml">    &#125;,</span></span><br><span class="language-javascript"><span class="language-xml"></span></span><br><span class="language-javascript"><span class="language-xml">    <span class="hljs-attr">methods</span>: &#123;</span></span><br><span class="language-javascript"><span class="language-xml"></span></span><br><span class="language-javascript"><span class="language-xml">    &#125;,</span></span><br><span class="language-javascript"><span class="language-xml">&#125;;</span></span><br><span class="language-javascript"><span class="language-xml"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span><br><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span></span><br><span class="language-xml"></span><br><span class="language-xml"><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></span><br></code></pre></td></tr></table></figure>
<p>App组件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&lt;template&gt;<br>  <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/home&quot;</span>&gt;</span>首页<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/about&quot;</span>&gt;</span>关于<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span></span><br><span class="language-xml">  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br>&lt;/template&gt;<br><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> &#123;</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;App&#x27;</span></span></span><br><span class="language-javascript"><span class="language-xml">&#125;</span></span><br><span class="language-javascript"><span class="language-xml"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span><br><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span></span><br><span class="language-xml"><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></span><br></code></pre></td></tr></table></figure>

<p>进入网站首页需要默认进入显示，那么就要使用<strong>redirect</strong>重定向</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript">在routes下再配置一个映射<br>&#123;<br>    <span class="hljs-attr">path</span>:<span class="hljs-string">&#x27;&#x27;</span>,<br>    <span class="hljs-attr">redirect</span>:<span class="hljs-string">&#x27;/home&#x27;</span> <span class="hljs-comment">//默认进入网站，先显示的是路径下Home组件</span><br>  &#125;,<br></code></pre></td></tr></table></figure>
<p>将原本URL的hash模式路径更改为HTML5的history模式</p>
<p>​	默认路径显示的是URL的hash模式这样子做的话就看起来有点不美观多个&#x2F;#&#x2F;这个就感觉会怪怪的</p>
<p>​	所以在router下设置mode为history模式</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> <span class="hljs-title class_">VueRouter</span>(&#123;<br>    <span class="hljs-comment">// 配置路由与组件之间的应用关系</span><br>    routes,<br>    <span class="hljs-attr">mode</span>:<span class="hljs-string">&#x27;history&#x27;</span><br>&#125;);<br>原先显示路径为：<span class="hljs-attr">http</span>:<span class="hljs-comment">//localhost:8080/#/home</span><br>显示路径为：<span class="hljs-attr">http</span>:<span class="hljs-comment">//localhost:8080/home</span><br></code></pre></td></tr></table></figure>
<h6 id="router-link补充"><a href="#router-link补充" class="headerlink" title="router-link补充"></a>router-link补充</h6><p>router-link：</p>
<p><strong>to</strong>将映射的路由显示在改内容上，通过<strong>router-view</strong>显示组件内容，是vue自带的一个标签默认形式为a标签可以通过<strong>tag</strong>更改标签属性，同时<strong>replace</strong>可以禁止用户通过点击前进后退网页键，<strong>router-link-active</strong>默认为route-link的class名，通过<strong>active-class</strong>可以更改class名，也可以通过在router实例属性下设置<strong>linkActiveClass</strong>进行修改</p>
<p>通过代码进行路由跳转</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs javascript"> &lt;button @click=<span class="hljs-string">&quot;homeclick&quot;</span>&gt;首页&lt;/button&gt;<br> <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;aboutclick&quot;</span>&gt;</span>关于<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></span><br><br><span class="hljs-attr">methods</span>:&#123;<br>  <span class="hljs-title function_">homeclick</span>(<span class="hljs-params"></span>)&#123;<br>    <span class="hljs-comment">// 通过代码的方式修改路径</span><br>    <span class="hljs-comment">// this.$router.push(&#x27;/home&#x27;);</span><br>    <span class="hljs-variable language_">this</span>.<span class="hljs-property">$router</span>.<span class="hljs-title function_">replace</span>(<span class="hljs-string">&#x27;/home&#x27;</span>);<br>  &#125;,<br>  <span class="hljs-title function_">aboutclick</span>(<span class="hljs-params"></span>)&#123;<br>    <span class="hljs-comment">// this.$router.push(&#x27;/about&#x27;);</span><br>    <span class="hljs-variable language_">this</span>.<span class="hljs-property">$router</span>.<span class="hljs-title function_">replace</span>(<span class="hljs-string">&#x27;/about&#x27;</span>);<br>  &#125;<br><br>&#125;<br></code></pre></td></tr></table></figure>

<h6 id="动态路由"><a href="#动态路由" class="headerlink" title="动态路由"></a>动态路由</h6><p>在不确定的情况下，页面的路径是不确定的</p>
<p>希望路径为&#x2F;user&#x2F;aaaa或&#x2F;user&#x2F;bbbb<br>除了有前面的&#x2F;user之外，后面还跟上了用户的ID<br>这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&#123;<br>  <span class="hljs-attr">path</span>:<span class="hljs-string">&#x27;/user/:userId&#x27;</span>,<br>  <span class="hljs-attr">component</span>:<span class="hljs-title class_">User</span><br>&#125;<br></code></pre></td></tr></table></figure>
<p>app组件截取片段</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&lt;router-link v-<span class="hljs-attr">bind</span>:to=<span class="hljs-string">&quot;&#x27;/user/&#x27;+userid&quot;</span>&gt;用户&lt;/router-link&gt;<br> <br> <span class="hljs-title function_">data</span>(<span class="hljs-params"></span>)&#123;<br>   <span class="hljs-keyword">return</span>&#123;<br>     <span class="hljs-attr">userid</span>:<span class="hljs-string">&#x27;list&#x27;</span><br>   &#125;<br> &#125;,<br></code></pre></td></tr></table></figure>
<p>user组件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&lt;template&gt;<br>  <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>我是用户界面<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>我是用户的相关信息，lll<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>&#123;&#123; userId &#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span></span><br><span class="language-xml">  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br>&lt;/template&gt;<br><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> &#123;</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;User&quot;</span>,</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-attr">computed</span>:&#123;</span></span><br><span class="language-javascript"><span class="language-xml">    <span class="hljs-title function_">userId</span>(<span class="hljs-params"></span>)&#123;</span></span><br><span class="language-javascript"><span class="language-xml">      <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>.<span class="hljs-property">$route</span>.<span class="hljs-property">params</span>.<span class="hljs-property">userId</span></span></span><br><span class="language-javascript"><span class="language-xml">    &#125;</span></span><br><span class="language-javascript"><span class="language-xml">  &#125;</span></span><br><span class="language-javascript"><span class="language-xml">&#125;</span></span><br><span class="language-javascript"><span class="language-xml"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span><br><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span></span><br><span class="language-xml"></span><br><span class="language-xml"><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></span><br></code></pre></td></tr></table></figure>

<h6 id="认识路由懒加载"><a href="#认识路由懒加载" class="headerlink" title="认识路由懒加载"></a>认识路由懒加载</h6><p>官方解释:<br>当打包构建应用时，Javascript 包会变得非常大，影响页面加载。<br>如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了</p>
<p>打包之后会一个dist文件夹其中包含了static文件夹和index.html文件，其中static文件夹下又包含有css和js文件夹其中js文件夹（以我自己打包好的js里的文件名为例）</p>
<p>app.211f9a59264ede307579 &#x3D;&gt; 存放业务代码（开发者所有代码）</p>
<p>manifest.2ae2e69a05c33dfc65f8 &#x3D;&gt; 为打包代码做底层支撑</p>
<p>vendor.eebede3e224c6b5c62ca &#x3D;&gt; 存放提供商也就是第三方插件</p>
<h6 id="路由懒加载使用"><a href="#路由懒加载使用" class="headerlink" title="路由懒加载使用"></a>路由懒加载使用</h6><p>首先,我们知道路由中通常会定义很多不同的页面<br>这个页面最后被打包在哪里呢?一般情况下是放在一个js文件中</p>
<p>但是，页面这么多放在一个js文件中,必然会造成这个页面非常的大<br>如果我们一次性从服务器请求下来这个页面，可能需要花费一定的时间,甚至用户的电脑上还出现了短暂空白的情况</p>
<p>如何避免这种情况呢?</p>
<p>使用路由懒加载就可以</p>
<p><strong>路由懒加载做了什么</strong>？<br>路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块</p>
<p>只有在这个路由被访问到的时候，才加载对应的组件</p>
<p>懒加载方式</p>
<p>1.结合Vue的异步组件和Webpack的代码分析.</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> <span class="hljs-title function_">Home</span> = resolve =&gt;&#123; <span class="hljs-built_in">require</span>.<span class="hljs-title function_">ensure</span>([<span class="hljs-string">&#x27;../components/Home.vue&#x27;</span>]，()=&gt; <span class="hljs-title function_">resolve</span>(<span class="hljs-built_in">require</span>(<span class="hljs-string">&#x27;../components/Home.vue&#x27;</span>))])&#125;;<br></code></pre></td></tr></table></figure>
<p>2.AMD写法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> <span class="hljs-title function_">About</span> = resolve =&gt; <span class="hljs-built_in">require</span>([<span class="hljs-string">&#x27;../components/About.vue&#x27;</span>]，resolve);<br></code></pre></td></tr></table></figure>

<p>3.在ES6中,我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割 (<strong>最常用</strong>)</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> <span class="hljs-title function_">Home</span> =(<span class="hljs-params"></span>)=&gt;<span class="hljs-keyword">import</span>(<span class="hljs-string">&#x27;../components/Home.vue&quot;)</span><br></code></pre></td></tr></table></figure>
<p>例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> <span class="hljs-title function_">Home</span> =(<span class="hljs-params"></span>) =&gt; <span class="hljs-keyword">import</span>(<span class="hljs-string">&#x27;../components/Home&#x27;</span>)<br><span class="hljs-keyword">const</span> <span class="hljs-title function_">About</span> =(<span class="hljs-params"></span>) =&gt; <span class="hljs-keyword">import</span>(<span class="hljs-string">&#x27;../components/About&#x27;</span>)<br><span class="hljs-keyword">const</span> <span class="hljs-title function_">User</span> =(<span class="hljs-params"></span>) =&gt; <span class="hljs-title function_">import</span>(<span class="hljs-params"><span class="hljs-string">&#x27;../components/User&#x27;</span></span>)<br><br>&#123;<br>    <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/home&#x27;</span>,<br>    <span class="hljs-attr">component</span>:<span class="hljs-title class_">Home</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/about&#x27;</span>,<br>    <span class="hljs-attr">component</span>: <span class="hljs-title class_">About</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">path</span>:<span class="hljs-string">&#x27;/user/:userId&#x27;</span>,<br>    <span class="hljs-attr">component</span>:<span class="hljs-title class_">User</span><br>  &#125;<br></code></pre></td></tr></table></figure>
<h1 id="Vue-router嵌套路由"><a href="#Vue-router嵌套路由" class="headerlink" title="Vue-router嵌套路由"></a>Vue-router嵌套路由</h1><p><strong>嵌套路由是一个很常见的功能</strong></p>
<p> 比如在home页面中,我们希望通过&#x2F;home&#x2F;news和&#x2F;home&#x2F;message访问一些内容<br> 一个路径映射一个组件,访问这两个路径也会分别渲染两个组件</p>
<p>实现嵌套路由分两步</p>
<ol>
<li>创建对应子组件，并且在路由映射中配置对应的子路由</li>
<li>在组件内部使用<strong>router-view</strong>标签</li>
</ol>
<p>index.js片段</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> <span class="hljs-title function_">Home</span> =(<span class="hljs-params"></span>) =&gt; <span class="hljs-keyword">import</span>(<span class="hljs-string">&#x27;../components/Home&#x27;</span>)<br><span class="hljs-keyword">const</span> <span class="hljs-title function_">HomeNews</span> =(<span class="hljs-params"></span>) =&gt; <span class="hljs-keyword">import</span>(<span class="hljs-string">&#x27;../components/HomeNews&#x27;</span>)<br><span class="hljs-keyword">const</span> <span class="hljs-title function_">HomeMessage</span> =(<span class="hljs-params"></span>) =&gt; <span class="hljs-title function_">import</span>(<span class="hljs-params"><span class="hljs-string">&#x27;../components/HomeMessage&#x27;</span></span>)<br><br>&#123;<br>    <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/home&#x27;</span>,<br>    <span class="hljs-attr">component</span>:<span class="hljs-title class_">Home</span>,<br>    <span class="hljs-attr">children</span>:[<br>      &#123;<br>        <span class="hljs-attr">path</span>:<span class="hljs-string">&#x27;news&#x27;</span>,<br>        <span class="hljs-attr">component</span>:<span class="hljs-title class_">HomeNews</span><br>      &#125;,<br>      &#123;<br>        <span class="hljs-attr">path</span>:<span class="hljs-string">&#x27;message&#x27;</span>,<br>        <span class="hljs-attr">component</span>:<span class="hljs-title class_">HomeMessage</span><br>      &#125;<br>    ]<br>  &#125;,<br></code></pre></td></tr></table></figure>
<p>Home组件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&lt;template&gt;<br>    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;Home&quot;</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>我是首页<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>我是首页，hhh<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/home/news&quot;</span>&gt;</span>新闻<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/home/message&quot;</span>&gt;</span>消息<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span> &gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">router-view</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br>&lt;/template&gt;<br><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> &#123;</span></span><br><span class="language-javascript"><span class="language-xml">    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Home&#x27;</span>,</span></span><br><span class="language-javascript"><span class="language-xml"></span></span><br><span class="language-javascript"><span class="language-xml">    <span class="hljs-title function_">data</span>(<span class="hljs-params"></span>) &#123;</span></span><br><span class="language-javascript"><span class="language-xml">        <span class="hljs-keyword">return</span> &#123;</span></span><br><span class="language-javascript"><span class="language-xml"></span></span><br><span class="language-javascript"><span class="language-xml">        &#125;;</span></span><br><span class="language-javascript"><span class="language-xml">    &#125;,</span></span><br><span class="language-javascript"><span class="language-xml"></span></span><br><span class="language-javascript"><span class="language-xml">    <span class="hljs-title function_">mounted</span>(<span class="hljs-params"></span>) &#123;</span></span><br><span class="language-javascript"><span class="language-xml"></span></span><br><span class="language-javascript"><span class="language-xml">    &#125;,</span></span><br><span class="language-javascript"><span class="language-xml"></span></span><br><span class="language-javascript"><span class="language-xml">    <span class="hljs-attr">methods</span>: &#123;</span></span><br><span class="language-javascript"><span class="language-xml"></span></span><br><span class="language-javascript"><span class="language-xml">    &#125;,</span></span><br><span class="language-javascript"><span class="language-xml">&#125;;</span></span><br><span class="language-javascript"><span class="language-xml"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span><br><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span></span><br><span class="language-xml"></span><br><span class="language-xml"><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></span><br></code></pre></td></tr></table></figure>
<p>HomeNews组件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&lt;template&gt;<br>  <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>新闻1<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>新闻2<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>新闻3<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>新闻4<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>新闻5<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></span><br><span class="language-xml">  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br>&lt;/template&gt;<br><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> &#123;</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;HomeNews&quot;</span></span></span><br><span class="language-javascript"><span class="language-xml">&#125;</span></span><br><span class="language-javascript"><span class="language-xml"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span><br><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span></span><br><span class="language-xml"></span><br><span class="language-xml"><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></span><br></code></pre></td></tr></table></figure>

<p>HomeMessage组件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&lt;template&gt;<br>  <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>消息1<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>消息2<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>消息3<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>消息4<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>消息5<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span></span><br><span class="language-xml">  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br>&lt;/template&gt;<br><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> &#123;</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;HomeMessage&quot;</span></span></span><br><span class="language-javascript"><span class="language-xml">&#125;</span></span><br><span class="language-javascript"><span class="language-xml"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span><br><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span></span><br><span class="language-xml"></span><br><span class="language-xml"><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></span><br><br></code></pre></td></tr></table></figure>
<h1 id="Vue-router参数传递"><a href="#Vue-router参数传递" class="headerlink" title="Vue-router参数传递"></a>Vue-router参数传递</h1><h5 id="演示参数传递"><a href="#演示参数传递" class="headerlink" title="演示参数传递"></a>演示参数传递</h5><p>为了演示传递参数我们这里再创建一个组件,并且将其配置好</p>
<ol>
<li>创建新的组件Profile.vue</li>
<li>配置路由映射</li>
<li>添加跳转的<router-link></li>
</ol>
<h5 id="route参数传递"><a href="#route参数传递" class="headerlink" title="route参数传递"></a>route参数传递</h5><h6 id="params的类型"><a href="#params的类型" class="headerlink" title="params的类型"></a><strong>params</strong>的类型</h6><p>配置路由格式：**&#x2F;router&#x2F;:id**</p>
<p>传递的方式：在path后面跟上对应值</p>
<p>传递后形成的路径：&#x2F;route&#x2F;123，&#x2F;router&#x2F;abc</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&#123;<br>   <span class="hljs-attr">path</span>:<span class="hljs-string">&#x27;/user/:id&#x27;</span>,<br>   <span class="hljs-attr">component</span>:<span class="hljs-title class_">User</span><br> &#125;<br> <br>  <span class="hljs-title function_">data</span>(<span class="hljs-params"></span>)&#123;<br>   <span class="hljs-keyword">return</span>&#123;<br>     <span class="hljs-attr">userid</span>:<span class="hljs-string">&#x27;list&#x27;</span><br>   &#125;<br> &#125;<br> <br>  &lt;router-link v-<span class="hljs-attr">bind</span>:to=<span class="hljs-string">&quot;&#x27;/user/&#x27;+userid&quot;</span>&gt;用户&lt;/router-link&gt;<br></code></pre></td></tr></table></figure>
<h6 id="query的类型"><a href="#query的类型" class="headerlink" title="query的类型"></a><strong>query</strong>的类型</h6><p>配置路由格式：**&#x2F;router**,就是普通配置</p>
<p>传递方式：对象中使用query的key作为传递方式</p>
<p>传递后形成的路径：&#x2F;route?id&#x3D;123，&#x2F;router?id&#x3D;abc</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> <span class="hljs-title function_">Profile</span> =(<span class="hljs-params"></span>) =&gt; <span class="hljs-title function_">import</span>(<span class="hljs-params"><span class="hljs-string">&#x27;../components/Profile&#x27;</span></span>)<br>&#123;<br>  <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/profile&#x27;</span>,<br>    <span class="hljs-attr">component</span>:<span class="hljs-title class_">Profile</span><br> &#125;<br></code></pre></td></tr></table></figure>
<h6 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h6><p>app组件截取片段</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&lt;router-link :to=<span class="hljs-string">&quot;&#123;path:&#x27;/profile&#x27;,query:&#123;name:&#x27;why&#x27;,age:18,height:1.88&#125;&#125;&quot;</span>&gt;档案&lt;/router-link&gt;<br><span class="hljs-comment">//路径显示：http://localhost:8080/profile?name=why&amp;age=18&amp;height=1.88</span><br><br><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;userClick&quot;</span>&gt;</span>用户<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></span><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;profileClick&quot;</span>&gt;</span>档案<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></span><br> <span class="hljs-title function_">data</span>(<span class="hljs-params"></span>)&#123;<br>    <span class="hljs-keyword">return</span>&#123;<br>      <span class="hljs-attr">userid</span>:<span class="hljs-string">&#x27;list&#x27;</span><br>    &#125;<br>  &#125;<br>  <br>  <span class="hljs-title function_">userClick</span>(<span class="hljs-params"></span>)&#123;<br>      <span class="hljs-variable language_">this</span>.<span class="hljs-property">$router</span>.<span class="hljs-title function_">push</span>(<span class="hljs-string">&#x27;/user/&#x27;</span>+<span class="hljs-variable language_">this</span>.<span class="hljs-property">userid</span>)<br>  &#125;,<br>  <span class="hljs-title function_">profileClick</span>(<span class="hljs-params"></span>)&#123;<br>      <span class="hljs-variable language_">this</span>.<span class="hljs-property">$router</span>.<span class="hljs-title function_">push</span>(&#123;<br>        <span class="hljs-attr">path</span>:<span class="hljs-string">&#x27;/profile&#x27;</span>,<br>        <span class="hljs-attr">query</span>:&#123;<br>          <span class="hljs-attr">name</span>:<span class="hljs-string">&#x27;zhangsan&#x27;</span>,<br>          <span class="hljs-attr">age</span>:<span class="hljs-number">17</span>,<br>          <span class="hljs-attr">height</span>:<span class="hljs-number">1.75</span><br>        &#125;<br>      &#125;)<br>    &#125;<br></code></pre></td></tr></table></figure>
<p>profile组件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&lt;template&gt;<br>  <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>我是Profile<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>&#123;&#123; $route.query.name &#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>&#123;&#123; $route.query.age &#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>&#123;&#123; $route.query.height &#125;&#125;<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span></span><br><span class="language-xml">  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br>&lt;/template&gt;<br><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> &#123;</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-attr">name</span>: <span class="hljs-string">&quot;Profile&quot;</span></span></span><br><span class="language-javascript"><span class="language-xml">&#125;</span></span><br><span class="language-javascript"><span class="language-xml"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span><br><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">scoped</span>&gt;</span></span><br><span class="language-xml"></span><br><span class="language-xml"><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></span><br></code></pre></td></tr></table></figure>
<h5 id="理解router与route"><a href="#理解router与route" class="headerlink" title="理解router与route"></a>理解router与route</h5><p>$route和$router是有区别的<br>$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法 </p>
<p>$route为当前router跳转对象里面可以获取name、path、query、params等</p>
<h1 id="Vue-router导航守卫"><a href="#Vue-router导航守卫" class="headerlink" title="Vue-router导航守卫"></a>Vue-router导航守卫</h1><h5 id="为什么使用导航守卫"><a href="#为什么使用导航守卫" class="headerlink" title="为什么使用导航守卫"></a>为什么使用导航守卫</h5><p>我们来考虑一个需求:在一个SPA应用中,如何改变网页的标题呢?<br>网页标题是通过<strong>title</strong>来显示的，但是SPA只有一个固定的HTML切换不同的页面时，标题并不会改变但是我们可以通过JavaScript来修改title的内容window.document.title &#x3D;’新的标题’<br>那么在Vue项目中,在哪里修改?什么时候修改比较合适呢?</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> routes = [<br>  &#123;<br>    <span class="hljs-attr">path</span>:<span class="hljs-string">&#x27;&#x27;</span>,<br>    <span class="hljs-attr">redirect</span>:<span class="hljs-string">&#x27;/home&#x27;</span><br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/home&#x27;</span>,<br>    <span class="hljs-attr">component</span>:<span class="hljs-title class_">Home</span>,<br>    <span class="hljs-attr">meta</span>:&#123;<br>        <span class="hljs-attr">title</span>:<span class="hljs-string">&#x27;首页&#x27;</span><br>    &#125;,<br>    <span class="hljs-attr">children</span>:[<br>      &#123;<br>        <span class="hljs-attr">path</span>:<span class="hljs-string">&#x27;news&#x27;</span>,<br>        <span class="hljs-attr">component</span>:<span class="hljs-title class_">HomeNews</span><br>      &#125;,&#123;<br>        <span class="hljs-attr">path</span>:<span class="hljs-string">&#x27;message&#x27;</span>,<br>        <span class="hljs-attr">component</span>:<span class="hljs-title class_">HomeMessage</span><br>      &#125;<br>    ]<br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/about&#x27;</span>,<br>    <span class="hljs-attr">component</span>: <span class="hljs-title class_">About</span>,<br>    <span class="hljs-attr">meta</span>:&#123;<br>      <span class="hljs-attr">title</span>:<span class="hljs-string">&#x27;关于&#x27;</span><br>    &#125;<br>  &#125;,<br>  &#123;<br>    <span class="hljs-attr">path</span>:<span class="hljs-string">&#x27;/user/:id&#x27;</span>,<br>    <span class="hljs-attr">component</span>:<span class="hljs-title class_">User</span>,<br>    <span class="hljs-attr">meta</span>:&#123;<br>      <span class="hljs-attr">title</span>:<span class="hljs-string">&#x27;用户&#x27;</span><br>    &#125;<br>  &#125;,&#123;<br>  <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/profile&#x27;</span>,<br>    <span class="hljs-attr">component</span>:<span class="hljs-title class_">Profile</span>,<br>    <span class="hljs-attr">meta</span>:&#123;<br>      <span class="hljs-attr">title</span>:<span class="hljs-string">&#x27;档案&#x27;</span><br>    &#125;<br>  &#125;<br>];<br><span class="hljs-comment">//全局导航守卫（前置钩子）</span><br>router.<span class="hljs-title function_">beforeEach</span>(<span class="hljs-function">(<span class="hljs-params">to, <span class="hljs-keyword">from</span>, next</span>)=&gt;</span>&#123;<br>  <span class="hljs-comment">//从from跳转到to</span><br>  <span class="hljs-variable language_">document</span>.<span class="hljs-property">title</span>=to.<span class="hljs-property">matched</span>[<span class="hljs-number">0</span>].<span class="hljs-property">meta</span>.<span class="hljs-property">title</span>;<br>  <span class="hljs-title function_">next</span>();<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;++++++&#x27;</span>)<br>&#125;)<br><br><span class="hljs-comment">//后置钩子</span><br>router.<span class="hljs-title function_">afterEach</span>(<span class="hljs-function">(<span class="hljs-params">to, <span class="hljs-keyword">from</span></span>)=&gt;</span>&#123;<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;-------&#x27;</span>)<br>&#125;)<br></code></pre></td></tr></table></figure>
<p><strong>meta</strong>：元数据（描述数据的数据）</p>
<p><strong>to</strong>:即将要进入的目标的路由对象 </p>
<p><strong>from</strong>:当前导航即将要离开的路由对象</p>
<p><strong>next</strong>: 调用该方法后，才能进入下一个钩子</p>
<h5 id="补充"><a href="#补充" class="headerlink" title="补充"></a>补充</h5><ol>
<li>如果是后置钩子,也就是afterEach,不需要主动调用next()函数.</li>
<li>上面我们使用的导航守卫,被称之为全局守卫</li>
</ol>
<h6 id="路由独享的守卫"><a href="#路由独享的守卫" class="headerlink" title="路由独享的守卫"></a>路由独享的守卫</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> router = <span class="hljs-keyword">new</span> <span class="hljs-title class_">VueRouter</span>(&#123;<br>	<span class="hljs-attr">routes</span>:[<br>		&#123;<br>			<span class="hljs-attr">path</span>:<span class="hljs-string">&#x27;/foo&#x27;</span>,<br>			<span class="hljs-attr">component</span>:<span class="hljs-title class_">Foo</span>,<br>			<span class="hljs-attr">befoteEnter</span>:<span class="hljs-function">(<span class="hljs-params">to,<span class="hljs-keyword">from</span>,next</span>)=&gt;</span>&#123;<br>			<span class="hljs-comment">//...</span><br>			&#125;<br>		&#125;<br>	]<br>&#125;)<br>例：<br>  &#123;<br>    <span class="hljs-attr">path</span>: <span class="hljs-string">&#x27;/about&#x27;</span>,<br>    <span class="hljs-attr">component</span>: <span class="hljs-title class_">About</span>,<br>    <span class="hljs-attr">meta</span>:&#123;<br>      <span class="hljs-attr">title</span>:<span class="hljs-string">&#x27;关于&#x27;</span><br>    &#125;,<br>    <span class="hljs-attr">befoteEnter</span>:<span class="hljs-function">(<span class="hljs-params">to,<span class="hljs-keyword">from</span>,next</span>)=&gt;</span>&#123;<br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;about befoteEnter&#x27;</span>)<br>      <span class="hljs-title function_">next</span>();<br>    &#125;<br><br>  &#125;<br></code></pre></td></tr></table></figure>
<h6 id="组件内的守卫"><a href="#组件内的守卫" class="headerlink" title="组件内的守卫"></a>组件内的守卫</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript">可以通过访问官方网站深入学习相关知识<br><span class="hljs-title class_">Vue</span>-router官方网站: <span class="hljs-attr">https</span>:<span class="hljs-comment">//routervuejs.org/zh/</span><br></code></pre></td></tr></table></figure>

<h1 id="keep-alive"><a href="#keep-alive" class="headerlink" title="keep-alive"></a>keep-alive</h1><p>keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。</p>
<p>router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存:</p>
<p> <strong>keep-alive</strong>有两个非常重要的属性:<br> include-字符串或正则表达，只有匹配的组件会被缓存<br> exclude-字符串或正则表达式，任何匹配的组件都不会被缓存</p>
<p>保持原有操作状态</p>
<p>比如：首页点击消息后，跳转其他页面再跳转回来，页面显示为最原先操作的页面内容即保持不变</p>
<h5 id="例子"><a href="#例子" class="headerlink" title="例子"></a>例子</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><code class="hljs javascript">#app组件片段截取<br>&lt;button @click=<span class="hljs-string">&quot;userClick&quot;</span>&gt;用户&lt;/button&gt;<br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;profileClick&quot;</span>&gt;</span>档案<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></span><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">keep-alive</span>&gt;</span></span><br><span class="language-xml">   <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span>/&gt;</span></span><br><span class="language-xml"><span class="hljs-tag">&lt;/<span class="hljs-name">keep-alive</span>&gt;</span></span><br><br><br>#<span class="hljs-title class_">Home</span>组件内容<br>&lt;template&gt;<br>    <span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;Home&quot;</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>我是首页<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span></span><br><span class="language-xml">        <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>我是首页，hhh<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/home/news&quot;</span>&gt;</span>新闻<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">router-link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">&quot;/home/message&quot;</span>&gt;</span>消息<span class="hljs-tag">&lt;/<span class="hljs-name">router-link</span>&gt;</span></span><br><span class="language-xml">      <span class="hljs-tag">&lt;<span class="hljs-name">router-view</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">router-view</span>&gt;</span></span><br><span class="language-xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span><br>&lt;/template&gt;<br><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="language-javascript"></span></span><br><span class="language-javascript"><span class="language-xml"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> &#123;</span></span><br><span class="language-javascript"><span class="language-xml">    <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;Home&#x27;</span>,</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-title function_">data</span>(<span class="hljs-params"></span>) &#123;</span></span><br><span class="language-javascript"><span class="language-xml">        <span class="hljs-keyword">return</span> &#123;</span></span><br><span class="language-javascript"><span class="language-xml">          <span class="hljs-attr">message</span>:<span class="hljs-string">&#x27;aaa&#x27;</span>,</span></span><br><span class="language-javascript"><span class="language-xml">          <span class="hljs-attr">path</span>:<span class="hljs-string">&#x27;/home/news&#x27;</span></span></span><br><span class="language-javascript"><span class="language-xml">        &#125;;</span></span><br><span class="language-javascript"><span class="language-xml">    &#125;,</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-title function_">created</span>(<span class="hljs-params"></span>) &#123;</span></span><br><span class="language-javascript"><span class="language-xml">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;home created&#x27;</span>)</span></span><br><span class="language-javascript"><span class="language-xml">  &#125;,</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-title function_">destroyed</span>(<span class="hljs-params"></span>) &#123;</span></span><br><span class="language-javascript"><span class="language-xml">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;home destroyed&#x27;</span>)</span></span><br><span class="language-javascript"><span class="language-xml">  &#125;,</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-title function_">activated</span>(<span class="hljs-params"></span>) &#123;</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-comment">//    活跃状态执行</span></span></span><br><span class="language-javascript"><span class="language-xml">    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;activated&#x27;</span>);</span></span><br><span class="language-javascript"><span class="language-xml">    <span class="hljs-variable language_">this</span>.<span class="hljs-property">$router</span>.<span class="hljs-title function_">push</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">path</span>);</span></span><br><span class="language-javascript"><span class="language-xml">  &#125;,</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-comment">// deactivated() &#123;</span></span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-comment">//   //    不活跃状态执行</span></span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-comment">//   console.log(&#x27;deactivated&#x27;);</span></span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-comment">//   this.path = this.$route.path</span></span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-comment">// &#125;,</span></span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-comment">//组件导航守卫</span></span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-title function_">beforeRouteLeave</span>(<span class="hljs-params">to,<span class="hljs-keyword">from</span>,next</span>)&#123;</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-comment">//导航离开该组件的对应路由时调用</span></span></span><br><span class="language-javascript"><span class="language-xml">      <span class="hljs-variable language_">this</span>.<span class="hljs-property">path</span> = <span class="hljs-variable language_">this</span>.<span class="hljs-property">$route</span>.<span class="hljs-property">path</span></span></span><br><span class="language-javascript"><span class="language-xml">      <span class="hljs-title function_">next</span>()</span></span><br><span class="language-javascript"><span class="language-xml">  &#125;,</span></span><br><span class="language-javascript"><span class="language-xml">  <span class="hljs-attr">methods</span>: &#123;</span></span><br><span class="language-javascript"><span class="language-xml"></span></span><br><span class="language-javascript"><span class="language-xml">  &#125;,</span></span><br><span class="language-javascript"><span class="language-xml">&#125;;</span></span><br><span class="language-javascript"><span class="language-xml"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span><br><br><span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span></span><br><span class="language-xml"></span><br><span class="language-xml"><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></span><br><br></code></pre></td></tr></table></figure>
<h6 id="注意："><a href="#注意：" class="headerlink" title="注意："></a>注意：</h6><p>其中<strong>activated</strong>与<strong>deactivated</strong>这两个函数需要该组件保持了状态使用<strong>keep-alive</strong>时，才会有效</p>

      </section>
      <section class="extra">
        
        
        
        
  <nav class="nav">
    <a href="/2023/12/28/%E5%9B%A2%E9%98%9F%E9%A1%B9%E7%9B%AE%E4%B8%ADgit%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8%E5%91%BD%E4%BB%A4/"><i class="iconfont iconleft"></i>团队项目中git的基本使用命令</a>
    <a href="/2023/12/12/hello-world/">初遇Hexo<i class="iconfont iconright"></i></a>
  </nav>

      </section>
      
    </section>
  </div>
</article></div>
      <div class="col-xl-3">
        
          
  <aside class="toc-wrap">
    <h3 class="toc-title">文章目录：</h3>
    <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%AE%A4%E8%AF%86%E8%B7%AF%E7%94%B1"><span class="toc-text">认识路由</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%B7%AF%E7%94%B1%E4%BB%8B%E7%BB%8D"><span class="toc-text">路由介绍</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%90%8E%E7%AB%AF%E8%B7%AF%E7%94%B1"><span class="toc-text">后端路由</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%89%8D%E7%AB%AF%E8%B7%AF%E7%94%B1"><span class="toc-text">前端路由</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Vue-router%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="toc-text">Vue-router基本使用</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Vue-router%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1"><span class="toc-text">Vue-router嵌套路由</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Vue-router%E5%8F%82%E6%95%B0%E4%BC%A0%E9%80%92"><span class="toc-text">Vue-router参数传递</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#Vue-router%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB"><span class="toc-text">Vue-router导航守卫</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#keep-alive"><span class="toc-text">keep-alive</span></a></li></ol>
  </aside>

        
      </div>
    </div>
  </div>
</main>
  

<footer class="footer">
  <div class="footer-social"><a 
        href="tencent://message/?Menu=yes&uin=894519210 "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#12B7F5'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconQQ "></i>
      </a><a 
        href="javascript:; "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#09BB07'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconwechat-fill "></i>
      </a><a 
        href="https://www.instagram.com/izhaoo/ "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#DA2E76'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconinstagram "></i>
      </a><a 
        href="https://github.com/zhaoo "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color= '#9f7be1'" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  icongithub-fill "></i>
      </a><a 
        href="mailto:izhaoo@163.com "
        target="_blank"
        class="footer-social-item"
        onMouseOver="this.style.color=#FF3B00" 
        onMouseOut="this.style.color='#33333D'">
          <i class="iconfont  iconmail"></i>
      </a></div>
  
    <div class="footer-copyright"><div><p>Powered by <a target="_blank" href="https://hexo.io">Hexo</a>  |  Theme - <a target="_blank" href="https://github.com/izhaoo/hexo-theme-zhaoo">zhaoo</a></p> <p><img class="aaa" src="/images/theme/iconBA.png" style="width:16px; height:18px"/> <a href="https://beian.mps.gov.cn/#/query/webSearch?code=44200102445419" rel="noreferrer" target="_blank">粤公网安备44200102445419</a>       &nbsp; <a href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备2023036693号</a></p><p>&copy;田林</p> </div></div>
  
</footer>
  
      <div class="fab fab-plus">
    <i class="iconfont iconplus"></i>
  </div>
  
  
  
  <div class="fab fab-up">
    <i class="iconfont iconcaret-up"></i>
  </div>
  
  
  
    
<script src="/js/color-mode.js"></script>

  
  
</body>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>





  
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>




  
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>








<script src="/js/utils.js"></script>
<script src="/js/script.js"></script>







  <script>
    (function () {
      var bp = document.createElement('script');
      var curProtocol = window.location.protocol.split(':')[0];
      if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
      } else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
      }
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
    })();
  </script>












</html>